<div class="layui-fluid" id="VIEW-list-table" lay-title="门店列表" lig-title="shop-title">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <!-- <div class="layui-card">
                <div class="layui-card-header" lig-lang="label-searchTitle">筛选数据</div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="lig-shop-searchform">
                        <div class="layui-row">
                            <div class="layui-inline">
                                <label class="layui-form-label" lig-lang="shop-name">名称</label>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" name="name" />
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-row layui-col-space10">
                                    <div class="layui-col-xs6">
                                        <div class="layui-btn layui-btn-sm layui-btn-fluid" lay-filter="lig-shop-search" lig-lang="btn-search">查询</div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" lig-lang="btn-reset">重置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div> -->
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm" lay-filter="lig-shop-add" lig-lang="btn-addshop">添加门店</div>
                    </div>
                    <table lay-filter="lig-shop-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-row-toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-modify" lig-lang="btn-modify">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-delete" lig-lang="btn-delete">删除</a>
</script>
<script type="text/html" id="tpl-shop-add">
    <form class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="shop-name">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input"
                        value=''>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig-lang="shop-name">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" autocomplete="off" class="layui-input"
                        value=''>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备:</label>
            <div class="layui-input-inline" style="width: 500px;">
                <div class="layui-input-inline" style="width: 500px; margin-bottom:10px;">
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" name="mac" autocomplete="off" placeholder="请输入设备MAC地址" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="button" class="layui-btn layui-btn-primary" id="lig-shop-device-add" value="添加设备"/>
                    </div>
                </div>
                <table class="layui-table" lay-skin="line" lay-size="sm" style="width: 410px;">
                  <thead>
                    <tr>
                      <th>MAC地址</th>
                      <th></th>
                    </tr> 
                  </thead>
                  <tbody lay-filter="tea-shop-device-list">
                  </tbody>
                </table>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-shop-modify">
    <form class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <input type="hidden" name="shopId" value="{{d.shopId}}"/>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="shop-name">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input"
                        value='{{d.name}}'>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig-lang="shop-name">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" autocomplete="off" class="layui-input"
                        value='{{d.address}}'>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="shopDeviceList" value='{{ JSON.stringify(d.deviceList) }}' />
            <label class="layui-form-label">设备:</label>
            <div class="layui-input-inline" style="width: 500px;">
                <div class="layui-input-inline" style="width: 500px; margin-bottom:10px;">
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" name="mac" autocomplete="off" placeholder="请输入设备MAC地址" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="button" class="layui-btn layui-btn-primary" id="lig-shop-device-add" value="添加设备"/>
                    </div>
                </div>
                <table class="layui-table" lay-skin="line" lay-size="sm" style="width: 410px;">
                  <thead>
                    <tr>
                      <th>MAC地址</th>
                      <th></th>
                    </tr> 
                  </thead>
                  <tbody lay-filter="tea-shop-device-list">
                  </tbody>
                </table>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-shop-device-row">
    <tr name="product-ingredient-row">
      <input type="hidden" name="deviceId" value="{{d.deviceId}}"/>
      <td>
        {{d.mac}}
      </td>
      <td>
          <input type="button" value="删除" name="shop-device-row-delete" class="layui-btn layui-btn-danger layui-btn-sm">
      </td>
    </tr>
</script>
<script type="text/html" id="tpl-shop-device-modify-row">
    <tr name="product-ingredient-row">
      <input type="hidden" name="deviceId" value="{{d.deviceId}}"/>
      <td>
        {{d.mac}}
      </td>
      <td>
          <input type="button" value="删除" name="shop-device-row-delete" class="layui-btn layui-btn-danger layui-btn-sm">
      </td>
    </tr>
</script>
<script type="text/html" id="tpl-shop-device-list">
    {{#  layui.each(d.deviceList, function(i, it){ }}
    <tr name="product-ingredient-row">
      <input type="hidden" name="deviceId" value="{{ it.deviceId }}"/>
      <td>
        {{ it.mac }}
      </td>
      <td>
          <input type="button" value="删除" name="shop-device-row-delete" class="layui-btn layui-btn-danger layui-btn-sm"/>
          {{#
            if (it.lockStatus == 0) {
          }}
          <input type="button" value="锁机" name="shop-device-lock" data-mac='{{ it.mac }}' 
          class="layui-btn layui-btn-sm">
          {{# } else { }}
          <input type="button" value="解锁" name="shop-device-unlock" data-mac='{{ it.mac }}' 
          class="layui-btn layui-btn-sm">
          {{# } }}
          
      </td>
    </tr>
    {{#  }); }}
</script>
<script>
    layui.use(['laydate', 'admin', 'table', 'form', 'dropdown', 'laytpl', 'jquery','lig2'], function (laydate, admin, table, form, dropdown, laytpl, $, lig) {
        //lig.filter();

        form.render();

        

        lig.table({
            elem: '[lay-filter="lig-shop-table"]',
            url: 'milktea/shop/page',
            cols: [[
                { title: '<span lig-lang="label-opt">操作</span>', toolbar: '#tpl-row-toolBar', align: 'left', width: 120, fixed: 'left'},
                { title: '<span lig-lang="shop-name">名称</span>', field: 'name', width: "30%" },
                { title: '<span>地址</span>', field: 'address', width: "50%" }
            ]],
            done: function () {
                lig.filter($('[lay-filter="lig-shop-table"]'));
            }
        },{
            mode:'dialog',
            entity: 'shop',
            primaryField: 'shopId',
            addContent: $('#tpl-shop-add').html(),
            addUrl: 'milktea/shop/add',
            addTitle: '<span lig-lang="shop-addshop">添加门店</span>',
            area: ['50%', '70%'],
            onAddOpened: function() {
                var _form = '[lay-filter="lig-saveForm"]';
                

                $('#lig-shop-device-add')
                    .unbind('click')
                    .bind('click', function() {

                    var mac = $(_form).find('input[name="mac"]').val();
                    if (mac == '') {
                        lig.msg('请输入设备MAC地址');
                        return;
                    }

                    lig.ajaxget({
                        url: '/milktea/device/get-by-mac/' + mac,
                        success: function(res) {
                            if (res.success) {
                                laytpl($('#tpl-shop-device-row').html()).render(res.data, function(html) {
                                    $('[lay-filter="tea-shop-device-list"]').append(html);

                                    $(_form).find('input[name="shop-device-row-delete"]')
                                        .unbind('click')
                                        .bind('click', function() {
                                            $(this).parents('tr').remove();
                                        });

                                    
                                });
                            }
                        }
                    });

                    
                });
            },

            modifyContent: $('#tpl-shop-modify').html(),
            modifyUrl: 'milktea/shop/modify',
            modifyTitle: '<span lig-lang="shop-modifyshop">修改门店</span>',
            onModifyOpened: function() {
                var _form = '[lay-filter="lig-saveForm"]',
                    deviceList = $(_form).find('input[name="shopDeviceList"]').val();

                var shop = {};
                if (typeof deviceList != 'undefined' && deviceList != '') {
                    shop.deviceList = JSON.parse(deviceList);
                }
                console.log(shop)

                showShopDeviceList(shop);
                                 

                $('#lig-shop-device-add')
                    .unbind('click')
                    .bind('click', function() {

                    var mac = $(_form).find('input[name="mac"]').val();
                    if (mac == '') {
                        lig.msg('请输入设备MAC地址');
                        return;
                    }

                    lig.ajaxget({
                        url: '/milktea/device/get-by-mac/' + mac,
                        success: function(res) {
                            if (res.success) {
                                if (res.data == null) {
                                    lig.msg('MAC地址不存在');
                                    return;
                                }
                                
                                laytpl($('#tpl-shop-device-modify-row').html()).render(res.data, function(html) {
                                    $('[lay-filter="tea-shop-device-list"]').append(html);

                                    $(_form).find('input[name="shop-device-row-delete"]')
                                        .unbind('click')
                                        .bind('click', function() {
                                            $(this).parents('tr').remove();
                                        });
                                });
                            }
                        }
                    });

                    
                });
            },

            removeUrl: 'milktea/shop/remove',
            getUrl: 'milktea/shop/{shopId}',
            onSave: function(data) {
                var _form = '[lay-filter="lig-saveForm"]';

                var deviceIdList = [];
                $(_form).find('input[name="deviceId"]').each(function(index, it) {
                    deviceIdList.push($(it).val());
                });
                data.deviceIdList = deviceIdList;
                return data;
            }
        });


        function showShopDeviceList(shop) {
            var _form = '[lay-filter="lig-saveForm"]',
                shopId = $(_form).find('input[name="shopId"]').val();

            laytpl($('#tpl-shop-device-list').html()).render(shop, function(html) {
                $('[lay-filter="tea-shop-device-list"]').empty();
                $('[lay-filter="tea-shop-device-list"]').append(html);

                $(_form).find('input[name="shop-device-row-delete"]')
                    .unbind('click')
                    .bind('click', function() {
                        $(this).parents('tr').remove();
                    });

                $(_form).find('input[name="shop-device-lock"]')
                    .unbind('click')
                    .bind('click', function() {
                        lig.ajaxpost({
                            url: 'milktea/device/lock',
                            data: { mac: $(this).data('mac')},
                            success: function(res) {
                                if (res.success) {
                                    lig.success('设备已锁机');
                                    reqShopDeviceList(shopId);
                                }
                            }
                        });
                    });

                $(_form).find('input[name="shop-device-unlock"]')
                    .unbind('click')
                    .bind('click', function() {
                        lig.ajaxpost({
                            url: 'milktea/device/unlock',
                            data: { mac: $(this).data('mac')},
                            success: function(res) {
                                if (res.success) {
                                    lig.success('设备已解锁');
                                    reqShopDeviceList(shopId);
                                }
                            }
                        });
                    });
            });
        }
        function reqShopDeviceList(id) {
            lig.ajaxget({
                url: 'milktea/shop/' + id,
                success: function(res) {
                    if (res.success) {
                        showShopDeviceList(res.data);
                    }
                }
            });
        }

    })
</script>